<template>
  <div class="pvc-box">
    <Form :model="configForm" ref="configForm" :rules="configRules" :label-width="100" label-position="left">
      <FormItem label="配置集">
        <dropdown-add v-model="configName" placeholder="请选择配置集" buttonText="新增配置集" :list="configSetList" @on-add="configSetAdd" @on-blur="updateBlur" ></dropdown-add>
      </FormItem>
      <FormItem label="挂载路径" prop="configMapMountPath">
        <Input v-model.trim="configForm.configMapMountPath" placeholder="例如：/home/work/config" @on-blur="updateBlur"></Input>
      </FormItem>
    </Form>

    <config-set-modal :visible.sync="configVisible" @finish="configSetAddFinish" ></config-set-modal>
  </div>
</template>
<script type="text/javascript">
import Fetch from '@/api/request'
import DropdownAdd from '@/components/dropdown-add'
import ConfigSetModal from '@/components/config-set/add-modify-model'
export default {
  name: 'ConfigSet',
  components: { DropdownAdd, ConfigSetModal },
  data() {
    const validateLength = (rule, value, callback) => {
      if (value && value.length > 128) {
        callback(new Error('最大长度不能大于128位'))
      } else {
        callback()
      }
    }
    return {
      configRules: {
        configMapMountPath: [{required: false, trigger: 'blur', validator: validateLength}]
      },
      configSetList: [],
      configName: '',
      configVisible: false
    }
  },
  props: {
    configForm: {
      type: Object,
      default: {
        configMapName: '',
        configMapMountPath: ''
      }
    }
  },
  mounted() {
    this.configName = this.configForm.configMapName
    this.getConfigSet()
  },
  methods: {
    // 配置集新增完成
    configSetAddFinish(val) {
      this.configName = val
      this.$emit('update:configForm', {
        configMapName: this.configName,
        configMapMountPath: this.configForm.configMapMountPath
      })
      this.getConfigSet()
    },
    // 新增配置集
    configSetAdd() {
      this.configVisible = true
    },
    // 获取配置集列表
    getConfigSet() {
      Fetch.get({
        url: '/api/environments/' + this.$route.params.environmentId + '/configmaps'
      }).then((res) => {
        if (res && res.code === '0') {
          let temp = []
          res.data.forEach(e => {
            temp.push({
              id: e.id,
              name: e.id
            })
          })
          this.configSetList = temp
        } else {
          this.$Message.warning({
            content: res.message || '服务器内部错误',
            duration: this.DURATION
          })
        }
      }).catch((err) => {
        this.$Message.error(err.message)
      })
    },
    updateBlur() {
      this.$refs['configForm'].validate((valid) => {
        if (valid) {
          this.$emit('update:configForm', {
            configMapName: this.configName,
            configMapMountPath: this.configForm.configMapMountPath
          })
        } else {
          this.$emit('update:configForm', {
            configMapName: this.configName,
            configMapMountPath: ''
          })
        }
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.pvc-box {
  div.ivu-form-item {
    margin-bottom: 8px;
  }
}
</style>
